<template>
  <view class="container">
    <!-- 背景图片 -->
    <image class="bg-image" src="/static/bg.jpg" mode="aspectFill"></image>
    
    <!-- 顶部导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @tap="onBack">
        <image src="/static/icon-back.png" class="back-icon" />
      </view>
      <view class="navbar-title">{{ currentSection.title }}</view>
      <view class="navbar-right">
        <text class="timer">{{ formatTime(remainingTime) }}</text>
      </view>
    </view>

    <!-- 题目导航 -->
    <scroll-view class="section-nav" scroll-x>
      <view class="nav-list">
        <view
          v-for="(section, index) in sections"
          :key="section.type"
          :class="['nav-item', { active: currentSectionIndex === index }]"
          @tap="switchSection(index)"
        >
          {{ section.title }}
        </view>
      </view>
    </scroll-view>

    <!-- 作文题 -->
    <view v-if="currentSection.type === 'writing'" class="writing-section">
      <view class="card glass-effect">
        <view class="question-header">
          <text class="question-title">Part I Writing (30 minutes)</text>
          <text class="question-desc">Directions: For this part, you are allowed 30 minutes to write an essay. You should write at least 120 words but no more than 180 words.</text>
        </view>
        <view class="question-content">
          <text class="question-text">{{ currentSection.content }}</text>
        </view>
        <view class="answer-area">
          <textarea
            v-model="writingAnswer"
            class="writing-textarea"
            placeholder="请在此处作答..."
            :maxlength="500"
            show-confirm-bar
          />
          <view class="word-count">{{ writingAnswer.length }}/500</view>
        </view>
      </view>
    </view>

    <!-- 听力题 -->
    <view v-if="currentSection.type === 'listening'" class="listening-section">
      <view class="card glass-effect">
        <view class="audio-player">
          <view class="progress-bar">
            <slider
              :value="audioProgress"
              @change="onProgressChange"
              @changing="onProgressChanging"
              :min="0"
              :max="100"
              show-value
            />
          </view>
          <view class="player-controls">
            <view class="control-btn" @tap="togglePlay">
              <image :src="isPlaying ? '/static/icon-pause.png' : '/static/icon-play.png'" class="control-icon" />
            </view>
            <text class="time-text">{{ formatAudioTime(currentTime) }} / {{ formatAudioTime(duration) }}</text>
          </view>
        </view>
        <view class="question-content">
          <text class="question-text">{{ currentSection.content }}</text>
        </view>
        <view class="options-list">
          <view
            v-for="(option, index) in currentSection.options"
            :key="index"
            :class="['option-item', { selected: selectedAnswer === index }]"
            @tap="selectAnswer(index)"
          >
            <text class="option-label">{{ ['A', 'B', 'C', 'D'][index] }}</text>
            <text class="option-text">{{ option }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 阅读理解 -->
    <view v-if="currentSection.type === 'reading'" class="reading-section">
      <view class="card glass-effect">
        <view class="question-header">
          <text class="question-title">{{ currentSection.title }}</text>
        </view>
        <view class="passage-content">
          <text class="passage-text">{{ currentSection.passage }}</text>
        </view>
        <view class="questions-list">
          <view
            v-for="(question, qIndex) in currentSection.questions"
            :key="qIndex"
            class="question-item"
          >
            <text class="question-number">{{ qIndex + 1 }}.</text>
            <text class="question-text">{{ question.text }}</text>
            <view class="options-list">
              <view
                v-for="(option, oIndex) in question.options"
                :key="oIndex"
                :class="['option-item', { selected: readingAnswers[qIndex] === oIndex }]"
                @tap="selectReadingAnswer(qIndex, oIndex)"
              >
                <text class="option-label">{{ ['A', 'B', 'C', 'D'][oIndex] }}</text>
                <text class="option-text">{{ option }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="bottom-nav">
      <button class="nav-btn" @tap="prevSection" :disabled="currentSectionIndex === 0">上一题</button>
      <button class="nav-btn primary" @tap="nextSection" :disabled="currentSectionIndex === sections.length - 1">下一题</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      paperId: '',
      remainingTime: 130 * 60, // 130分钟
      currentSectionIndex: 0,
      writingAnswer: '',
      isPlaying: false,
      audioProgress: 0,
      currentTime: 0,
      duration: 0,
      selectedAnswer: -1,
      readingAnswers: [],
      sections: [
        {
          type: 'writing',
          title: '写作',
          content: 'Write an essay on the topic "The Importance of Reading". You should write at least 120 words but no more than 180 words.'
        },
        {
          type: 'listening',
          title: '听力',
          content: 'Listen to the following conversation and choose the best answer.',
          options: [
            'The woman is looking for a part-time job.',
            'The woman wants to change her major.',
            'The woman is planning to study abroad.',
            'The woman is preparing for an exam.'
          ]
        },
        {
          type: 'reading',
          title: '阅读理解',
          passage: 'Passage text here...',
          questions: [
            {
              text: 'What is the main idea of the passage?',
              options: [
                'Option A',
                'Option B',
                'Option C',
                'Option D'
              ]
            }
          ]
        }
      ]
    }
  },
  computed: {
    currentSection() {
      return this.sections[this.currentSectionIndex]
    }
  },
  onLoad(options) {
    this.paperId = options.id
    this.startTimer()
  },
  methods: {
    onBack() {
      uni.showModal({
        title: '提示',
        content: '确定要退出答题吗？',
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack()
          }
        }
      })
    },
    startTimer() {
      this.timer = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--
        } else {
          this.submitExam()
        }
      }, 1000)
    },
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = seconds % 60
      return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
    },
    formatAudioTime(seconds) {
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = Math.floor(seconds % 60)
      return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
    },
    switchSection(index) {
      this.currentSectionIndex = index
    },
    prevSection() {
      if (this.currentSectionIndex > 0) {
        this.currentSectionIndex--
      }
    },
    nextSection() {
      if (this.currentSectionIndex < this.sections.length - 1) {
        this.currentSectionIndex++
      }
    },
    togglePlay() {
      this.isPlaying = !this.isPlaying
      // TODO: 实现音频播放控制
    },
    onProgressChange(e) {
      this.audioProgress = e.detail.value
      // TODO: 实现音频进度控制
    },
    onProgressChanging(e) {
      // TODO: 实现音频拖动预览
    },
    selectAnswer(index) {
      this.selectedAnswer = index
    },
    selectReadingAnswer(questionIndex, optionIndex) {
      this.$set(this.readingAnswers, questionIndex, optionIndex)
    },
    submitExam() {
      // TODO: 实现提交试卷逻辑
      uni.showModal({
        title: '提示',
        content: '考试时间已到，系统将自动提交试卷',
        showCancel: false,
        success: () => {
          uni.navigateBack()
        }
      })
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  position: relative;
  background: transparent;
  padding-bottom: 120rpx;
}

.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
  background: transparent;
  padding-top: calc(env(safe-area-inset-top) + 50px);
  box-sizing: border-box;
}

.navbar-left {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
}

.back-icon {
  width: 32rpx;
  height: 32rpx;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  color: #222;
  font-weight: bold;
}

.navbar-right {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timer {
  font-size: 28rpx;
  color: #283b66;
  font-weight: bold;
}

.section-nav {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 24rpx;
  white-space: nowrap;
  margin-top: 50rpx;
}

.nav-list {
  display: inline-flex;
  padding: 24rpx 0;
}

.nav-item {
  padding: 12rpx 32rpx;
  font-size: 28rpx;
  color: #666;
  background: transparent;
  border-radius: 32rpx;
  margin-right: 16rpx;
}

.nav-item.active {
  background: #283b66;
  color: #fff;
}

.card {
  margin: 32rpx;
  border-radius: 24rpx;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 32rpx;
}

.question-header {
  margin-bottom: 32rpx;
}

.question-title {
  font-size: 32rpx;
  color: #283b66;
  font-weight: bold;
  display: block;
  margin-bottom: 16rpx;
}

.question-desc {
  font-size: 26rpx;
  color: #666;
  display: block;
}

.question-content {
  margin-bottom: 32rpx;
}

.question-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.answer-area {
  position: relative;
}

.writing-textarea {
  width: 100%;
  height: 400rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  font-size: 28rpx;
  line-height: 1.6;
  box-sizing: border-box;
}

.word-count {
  position: absolute;
  right: 24rpx;
  bottom: 24rpx;
  font-size: 24rpx;
  color: #999;
}

.audio-player {
  margin-bottom: 32rpx;
}

.progress-bar {
  margin-bottom: 16rpx;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
}

.control-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #283b66;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-icon {
  width: 32rpx;
  height: 32rpx;
}

.time-text {
  font-size: 24rpx;
  color: #666;
}

.options-list {
  margin-top: 32rpx;
}

.option-item {
  display: flex;
  align-items: flex-start;
  padding: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
}

.option-item.selected {
  background: #e8f0ff;
}

.option-label {
  width: 48rpx;
  height: 48rpx;
  background: #283b66;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.option-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  flex: 1;
}

.passage-content {
  margin-bottom: 32rpx;
  padding: 24rpx;
  background: #fff;
  border-radius: 16rpx;
}

.passage-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
}

.question-item {
  margin-bottom: 32rpx;
}

.question-number {
  font-size: 28rpx;
  color: #283b66;
  font-weight: bold;
  margin-right: 8rpx;
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 24rpx 32rpx;
  display: flex;
  justify-content: space-between;
  gap: 24rpx;
  box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.05);
}

.nav-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  background: #f5f5f5;
  color: #666;
  border: none;
}

.nav-btn.primary {
  background: #283b66;
  color: #fff;
}

.nav-btn[disabled] {
  opacity: 0.5;
}
</style> 